<!--
 * @Author: quit
 * @Date: 2022-01-08 18:24:14
 * @LastEditTime: 2022-01-12 17:12:25
 * @Descripttion: tool图片组件
-->
<template>
    <div class="view-image">
        <template v-if="editMode">
            <template v-if="imageURL != ''">
                <img style="width: 100%; height: 100%" :src="detail.style.url" @dragstart.prevent @dragover.prevent @drop.prevent>
            </template>
            <!-- <q-icon v-else name="photo_size_select_actual" size="120px" color="light" /> -->
            <svg-icon v-else icon-class="images" style="width: 8em; height: 8em" />
        </template>
        <template v-else>
            <img style="width: 100%; height: 100%" :src="imageURL" @dragstart.prevent @dragover.prevent @drop.prevent>
        </template>
    </div>
</template>

<script>
import BaseView from './View'
export default {
    name: 'ViewImage',
    components: {},
    extends: BaseView,
    props: {},
    data() {
        return {}
    },
    computed: {
        imageURL: function() {
            if (this.detail.style.url === undefined || this.detail.style.url === '') {
                return ''
            } else {
                return this.detail.style.url
            }
        }
    },
    methods: {}
}
</script>

<style lang="scss">
.view-image {
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
